import React, { Component } from 'react'
import Son from './components/Son'
import request from './utils/request'
//类组件
export class App extends Component {
  //data
  state={
    list:["谢大脚","刘能"],
    data:[]
  }
  //页面挂载前触发的生命周期
  componentDidMount(){
    request.get("/list").then(res=>{
      console.log(res);
      //把state中的state中的data赋值
      this.setState({data:res.data})
    })
  }
  btn(){
    const data = ["焦宪宗","大帅哥"]
    //修改类组件中的数据 会用this.setState()
    this.setState({list:data})
  }
  parent(data){
    console.log("我是父组件中的parent");
    this.setState({list:data})
  }
  render() {
    let {list,data} = this.state
    return (
      <div>
        app
        {
          // 进行map循环渲染
        }
        {
          data.map((item,index)=>{
            return <div key={index} style={{width:"100%",height:"200px",background:"green"}}>
              <p>id: {item.id} </p>
              <p>title:{item.title}</p>
              img:<img src={item.img} alt="55555555555555"/>
            </div>
          })
        }
        <Son list={list}  parent={this.parent.bind(this)}/>
        <button onClick={this.btn.bind(this)}>点我改变数据</button>
      </div>
    )
  }
}

export default App
